<template>
	<view class="page">
		<form @submit="formSubmit">
			<div class="form">
				<div class="item">
					<input v-model="mobile" placeholder="请输入手机号" />
				</div>
				<div class="item">
					<input v-model="sms_code" placeholder="请输入验证码" />
					<div @tap="getCode" class="getCode">{{ verificationCode }}</div>
				</div>
				<div class="item">
					<input v-model="pwd" placeholder="请输入新密码" />
				</div>

			</div>

			<div class="btn">
				<button class="submit" form-type="submit" :class="{'aui-bg-linear':mobile!=''&&pwd!=''}">确定</button>
			</div>
		</form>
	</view>
</template>
<script>
	import graceChecker from "@/common/graceChecker"; //来自 graceUI 的表单验证， 使用说明见手册 http://grace.hcoder.net/doc/info/73-3.html
	export default {
		data() {
			return {
				submitDisabled: false,
				title: "表单验证",
				pageroute: "",
				mobile: "",
				pwd: '',
				sms_code: '',
				inviteCode: '',
				regionId: '',
				checked: 0,
				value: "",
				verificationCode: "获取验证码",
				timer: null,
				time: 60,
			};
		},
		onLoad(options) {
			this.pageroute = options.url;
			if (options.mobile) {
				this.mobile = options.mobile;
				this.submitDisabled = false;
			}
		},
		methods: {
			jump() {
				uni.navigateTo({
					url: `/pages/user/auth/auth`
				})
			},
			isPoneAvailable(str) {
				var myreg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
				if (!myreg.test(str)) {
					return false;
				} else {
					return true;
				}
			},
			getCode() {
				console.log(this.timer, this.time, "----");


				if (!this.isPoneAvailable(this.mobile)) {
					uni.showToast({
						title: '请输入正确的手机号'
					})
					return;
				}


				if (this.timer) return;
				clearInterval(this.timer);

				uni.request({
					url: "/api/Sms/sendAuthCode",
					data: {
						mobile: this.mobile,
						flag: 1
					},
					success: (res) => {
						console.log(res.msg)
						uni.showToast({
							title: '发送成功'
						})
						this.verificationCode = this.time;
						this.timer = setInterval(() => {
							this.time--;
							console.log(this.timer, this.time, "----");
							this.verificationCode = this.time;
							if (this.time == 0) {
								this.verificationCode = "获取验证码";
								clearInterval(this.timer);
							}
						}, 1000);
					},
					fail: (res) => {
						uni.showToast({
							title: res.msg
						})
					},
				});

			},

			CheckboxChange(e) {
				this.checked = e.detail.value;
			},
			onKeyInput: function(e) {
				this.submitDisabled = false;
			},
			formSubmit: function(e) {

				if (!this.isPoneAvailable(this.mobile)) {
					uni.showToast({
						title: '请输入正确的手机号'
					})
					return;
				}


				uni.request({
					url: "/api/login/setPasswd",
					data: {
						mobile: this.mobile,
						password: this.pwd,
						authCode: this.sms_code
					},
					success: (res) => {
						uni.showToast({
							title: res.msg
						})
						if (res.status == "1") {
							uni.navigateTo({
								url: `/pages/user/auth/auth`
							})
						}

					},
					fail: (res) => {

					},
				});

			},
			auth() {
				this.$wanlshop.to(`auth?url=${this.pageroute}`);
			},
			help() {
				this.$wanlshop.to(`/pages/user/help?url=${this.pageroute}`);
			},
		},
	};
</script>

<style lang="scss">
	.page {
		padding: 0rpx 50rpx;
		box-sizing: border-box;

		.aui-bg-linear {
			background: rgba(0, 90, 147, 1) !important;
		}

		.title {
			font-size: 62rpx;
			font-weight: 700;
		}

		.sub-title {
			margin-top: 20rpx;
			font-size: 32rpx;

			.text1 {
				color: #808080;
			}

			.text2 {
				color: #005a93;
			}
		}

		.form {
			// margin-top: 90rpx;

			.item {
				height: 110rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-bottom: 1rpx solid #e6e6e6;
				position: relative;

				.getCode {
					position: absolute;
					right: 0;
					top: 50%;
					transform: translateY(-50%);
					color: #005a93;
					width: 160rpx;
					height: 100%;
					line-height: 110rpx;
					text-align: center;
					z-index: 111;
				}

				input {
					width: 100%;
					height: 100%;
				}
			}
		}

		.btn {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 100rpx;
			margin-top: 80rpx;

			.submit {
				width: 100%;
				height: 100%;
				background: #b3cedf;
				font-size: 26rpx;
				color: #fff;
				border-radius: 10rpx;
				text-align: center;
				line-height: 100rpx;
			}
		}
	}

	.auth-clause {
		display: flex;
		align-items: center;
		font-size: 25rpx;
		color: #909090;
		margin-top: 50rpx;

		checkbox {
			margin-right: 6rpx;
			transform: scale(0.7);
		}

		text {
			margin: 0 10rpx;
			color: #ed6d0f;
		}
	}
</style>